<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3-2-2-导航栏的创建</title>
	<link rel="stylesheet" href="lib/lib/css/bootstrap.min.css">
</head>
<body>
	


<div class="container">

	<span class="help">平行导航栏  nav-tabs</span>
		<ul class="nav nav-tabs" role="tablist" id="mytab">
			<li class="active" role="presentation" ><a href="#">home</a></li>
			<li class="" role="presentation" ><a href="#">hello</a></li>
			<li class="" role="presentation" ><a href="#">world</a></li>
		</ul>

		<br>
	<span class="help">胶囊导航栏(胶囊导航栏默认平行)  nav-pills</span>
		<ul class="nav nav-pills" role="tablist" id="mytab">
			<li class="active" role="presentation" ><a href="#">home</a></li>
			<li class="" role="presentation" ><a href="#">hello</a></li>
			<li class="" role="presentation" ><a href="#">world</a></li>
		</ul>

		<br>
	<span class="help">胶囊样式的垂直导航栏  nav-stacked </span>
		<ul class="nav nav-pills  nav-stacked" role="tablist" id="mytab">
			<li class="active" role="presentation" ><a href="#">home</a></li>
			<li class="" role="presentation" ><a href="#">hello</a></li>
			<li class="" role="presentation" ><a href="#">world</a></li>
		</ul>

<br>
	<span class="help">胶囊导航栏 全局铺满  nav-stacked </span>
		<ul class="nav nav-pills  nav-justified" role="tablist" id="mytab">
			<li class="active" role="presentation" ><a href="#">nav-justified</a></li>
			<li class="" role="presentation" ><a href="#">充满全屏</a></li>
			<li class=" disabled" role="presentation" >
				<a href="#"  > (添加样式 disabled禁选，目前仍可选中，待解决）</a>
			</li>
		</ul>

<br>
	<span class="help">可下拉导航栏 </span>
		<ul class="nav nav-pills  nav-justified" role="tablist" id="mytab">
			<li class="active" role="presentation" ><a href="#">nav-justified</a></li>
			<li class="" role="presentation" ><a href="#">充满全屏</a></li>
			<li class="" role="presentation" >
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					world<span class="caret"></span>
				</a>

				<ul class="dropdown-menu" role="menu">
					<li role="presentation"><a href="" role="menuitem" tabindex="-1">hello 1</a></li>
					<li role="presentation"><a href="" role="menuitem" tabindex="-1">hello 2</a></li>
					<li role="presentation"><a href="" role="menuitem" tabindex="-1">hello 3</a></li>
					<li role="presentation"><a href="" role="menuitem" tabindex="-1">hello 4</a></li>
				</ul>
			</li>
		</ul>


<br>
<h2>平行导航栏+选项卡</h2>
		<div class="container">
			<ul id="mytabs" class="nav nav-tabs">
				<li class="active"><a href="#home" data-toggle="tab">home</a></li>
				<li ><a href="#two" data-toggle="tab">two</a></li>
			</ul>
			<div class="tab-content">	
				<div id="home" class="tab-pane active">homehomehomehome</div>
				<div id="two" class="tab-pane">twotwotwotwo</div>
			</div>
		</div>





		

</div>




<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>

<script type="text/javascript">
	$("#mytab  a").click(function(e){
		e.preventDefault()
		$(this).tab("show")
	})


</script>

</body>
</html>